<template>
	<view class="container" style="background-image: url(/static/images/scratch_card_bg.png);background-size: 100% 100%;">
		<!-- 刮奖 -->
		<view class="scratch">
			<view class="box">
				<!-- 刮奖结果图片 -->
				<image :src="prize_img" class="img"></image>
				<!-- 刮奖canvas容器 -->
				<canvas
					class="canvas-box"
					canvas-id="canvas-id"
					:disable-scroll="true"
					@touchstart="touchStart"
					@touchmove="touchMove"
					@touchend="touchEnd"
				>
				</canvas>
				<!-- 刮奖前提示消息，开始刮奖后隐藏 -->
				<!-- #ifndef APP-PLUS -->
				<cover-view class="tip" v-if="!toDraw">
					<!-- 开始刮奖按钮 -->
					<cover-view class="btn" @click="scratchStart()">
						<cover-view class="text">立即刮奖</cover-view>
					</cover-view>
				</cover-view>
				<!-- #endif -->
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="apptip" v-if="!toDraw">
			<view class="btn" @click="scratchStart()">
				<view class="text">立即刮奖</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- 如果后端没有不中奖的图，则不中奖时默认显示 -->
		<view :class="'cu-modal cu-prize_box'+[modalName == 'prize_box'?' show':'']">
			<view class="cu-dialog" @click="navToUrl('/pages/index/index')">
				<view class="bg-img">
					<view class="cu-content">
						<view class="padding-lg text-bold text-xxl" style="color: red;">{{ prize_msg }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Scratch from '@/common/scratch.js'
	export default {
		data() {
			return {
			  toDraw: false, // 是否开始刮奖
			  showResult: false, // 是否显示抽奖结果
			  isWin: true, // 是否中奖
			  scratchWidth: 350, // 绘制刮奖范围宽
			  scratchHeight: 150, // 绘制刮奖范围高
			  scratchSize: 10, // 触手大小
			  scratchScale: 0.1, // 需刮开百分比
			  prize_img: '', // 中奖图片
			  isScratching: false ,// 是否正在刮奖,
			  hasDraw: false, // 不中奖
			  scratch_card:[],
			  duration:0,
			  modalName: null,
			  prize_msg:''
			}
		},
		onUnload(){
			// 页面关闭移除计时器，否则app平台有BUG
			clearInterval(this.cTime);
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.prize_img = '/static/images/mask-img.jpg';
		},
		onBackPress: function (option) {
            if (options.from === 'navigateBack') {  
				uni.switchTab({
					url: '/pages/index/index'
				})  
            } 
            return true;  
        },  
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/other?type=scratch_card',
			});	
		},
		methods: {
			// 点击按钮开始刮奖
			scratchStart () {
				this.toDraw = true
				this.initCanvas()
				this.doPrizeScratchTicketFun()
			},
			initCanvas () {
				// 刮奖初始化信息必须在onReady后，不然h5不支持（小程序可在onLoad执行）
				this.scratch_card = new Scratch(this, {
					canvasId: 'canvas-id',
					width: this.scratchWidth,
					height: this.scratchHeight,
					size: this.scratchSize,
					scale: this.scratchScale
				})
			},
			// 请求刮奖结果
			doPrizeScratchTicketFun () {
				this.prize_img = '/static/images/ok1.png';
				if (this.isScratching) return false
				this.isScratching = true
				// 请求服务器刮奖结果信息
				this.duration = 1;
				this.cTime = setInterval(()=>{
					if(this.duration>0){
						this.duration ++ ;
					}
					if(this.scratch_card.show){
						clearInterval(this.cTime);
						this.duration = 0;
						this.doScratchCard();
					}
				},1000);
			},
			doScratchCard: function() {
				this.helper.checkLogin();
				var token = 'token';
				var info = uni.getStorageSync("userinfo");
				if(info.token){
					token = info.token;
				}
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+token,'timestamp='+timestamp]);
				this.helper.req({
					api:"doScratchCard",
					timestamp:timestamp,
					data:{token:token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					// this.hasDraw = true;
					this.prize_msg = res.data.message;
					this.modalName = "prize_box";
					
					// uni.showModal({
					// 	title: "提示",
					// 	content: res.data.message,
					// 	showCancel: false,
					// 	confirmText: "确定",
					// 	success:function(res){

					// 	}
					// })
					uni.hideLoading();
				})
			},
			navToUrl: function(url) {
				if(url == '/pages/index/index'){
					return uni.switchTab({
						url: url
					});
				}else{
					return uni.navigateTo({
						url: url
					});
				}
			},
		}
	}
</script>

<style lang="scss">
.container{
	height: 1244upx;
}
.cu-prize_box .cu-dialog{
	height: 600upx;
	background: url("/static/images/ok.png") no-repeat;
	background-size: 100%;
}
.cu-prize_box .bg-img{
	height: 360upx;
	background: url("/static/images/ok1.png") no-repeat;
	background-size: 100%;
	margin-top: 120upx;
	padding-top: 120upx;
}
.scratch {
  width: 490upx;
  height: 290upx;
  background-color: #ffe22d;
  // background: url("/static/images/mask-img.jpg") no-repeat;
  background-size: contain;
  margin: 362upx auto 20upx;
  padding: 20upx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  .box {
    width: 100%;
    height: 100%;
    // border-radius: 20upx;
    position: relative;
    overflow: hidden;
	// background-color: pink;
	background: #fff;
	border-radius: 18upx;
	// background: url("/static/images/mask-img.jpg") no-repeat;
	background-size: 100% 100%;
	z-index: 1;
    .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
	  z-index: 2;
    }
    .canvas-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // border-radius: 20upx;
      overflow: hidden;
	  z-index: 3;
    }
    .tip {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      text-align: center;
      .text {
        font-size: 30upx;
        font-weight: bold;
        margin-top: 69upx;
        .text-tip {
          display: inline-block;
          vertical-align: middle;
        }
        .light {
          display: inline-block;
          vertical-align: middle;
          margin: 0 6upx !important;
        }
      }
      .btn {
        width: 360upx;
        height: 82upx;
        border: none;
        border-radius: 41upx;
        margin: 88upx auto 0;
        position: relative;
        background: red;
        .btn-img {
          border: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        .text {
          display: inline;
          position: absolute;
          text-align: center;
          color: #fff;
          font-size: 30upx;
          font-weight: bold;
          margin: 0;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .award-box {
      width: 100%;
      height: 100%;
      border-radius: 20upx;
      text-align: center;
      line-height: 270upx;
	   background: url("/static/images/ok1.png") no-repeat;
	   background-size: 100% 100%;
      .text {
        font-size: 40upx;
        font-weight: bold;
      }
    }
  }
}
.apptip {
  text-align: center;
  .btn {
	width: 360upx;
	height: 82upx;
	border: none;
	border-radius: 41upx;
	margin: 0 auto 0;
	position: relative;
	background: red;
	.text {
	  display: inline;
	  position: absolute;
	  text-align: center;
	  color: #fff;
	  font-size: 30upx;
	  font-weight: bold;
	  margin: 0;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	}
  }
}
</style>
